<!DOCTYPE html>
<html>
<head contenteditable style="display: block; white-space: nowrap; margin:100px; border: solid 1px black;"></head>
<body>
<script>
var head = document.getElementsByTagName('head')[0];

function log(text) {
    var div = document.createElement('div');
    div.textContent = text;
    head.appendChild(div);
}

var firstLine = document.createElement('div');
firstLine.textContent = "Click on the right of this line outside the black box.";
head.appendChild(firstLine);

var longLine = document.createElement('span');
longLine.textContent = "The caret should be placed on the right of the first line, NOT on the right of this line.";
head.appendChild(longLine);

var longLineChild = document.createElement('span');
longLine.appendChild(longLineChild);

while (longLine.offsetWidth < head.offsetWidth + 200)
    longLine.lastChild.textContent += ' some text';

if (window.testRunner) {
    testRunner.dumpAsText();

    eventSender.mouseMoveTo(firstLine.offsetLeft + head.offsetWidth + 10,
        100 + firstLine.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.mouseUp();

    if (!getSelection().isCollapsed)
        log('FAIL - selection was not collapsed');
    else if (getSelection().baseNode != firstLine.firstChild)
        log('FAIL - caret was not in the first line');
    else if (getSelection().baseOffset != firstLine.textContent.length)
        log('FAIL - caret was not on the right edge');
    else
        log('PASS');

    longLine.lastChild.style = document.createElement('style');
    longLine.lastChild.style.display = 'none';
};
</script>
</body>
</html>
